<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>修改昵称</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <input
        class="nicknameInp"
        type="text"
        maxlength="10"
        focus
        v-model="nickname"
        placeholder="请输入昵称（1-10字）"
      />
      <!-- 确定按钮 -->
      <view class="lbtn" @click="doSaveUserBaseInfo"> 确定 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';

const store = useCounterStore();
const userInfo = ref();
const nickname = ref(store.userInfo?.nick_name || '');

// 保存个人资料修改
const doSaveUserBaseInfo = async () => {
  if (!nickname.value) {
    uni.showToast({
      title: '请先输入昵称',
      icon: 'none',
    });
    return;
  }
  const datas = {
    field: 'nick_name',
    value: nickname.value,
  };
  await request('wxapp/user/doSaveUserBaseInfo', datas, 'POST');
  store.userInfo.nick_name = nickname.value;
  uni.navigateBack({
    delta: 1,
  });
};

onShow(() => {
  userInfo.value = store.userInfo;
});
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #fff;
}

.page_content {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #eaf2fc;
  .nicknameInp {
    box-sizing: border-box;
    padding-left: 40rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #fff;
  }
  .lbtn {
    margin-top: 30rpx;
    font-size: 30rpx;
    line-height: 80rpx;
    background-color: #3692ff;
    text-align: center;
    color: #fff;
    border-radius: 40rpx;
  }
}
</style>
